<template>
  <div class="left-top">
    <div class="info boxstyle">
      <div class="tag-title">评估机构统计</div>
      <div class="info-main">
        <ul>
          <li>
            <img src="picture/info-img-1.png" alt />
            <span>机构总数(个)</span>
            <p>{{jgsum}}</p>
          </li>
          <li>
            <img src="picture/info-img-2.png" alt />
            <span>已评估(个)</span>
            <p>{{ypg}}</p>
          </li>
          <li>
            <img src="picture/info-img-3.png" alt />
            <span>评估中(个)</span>
            <p>{{pgz}}</p>
          </li>
          <li>
            <img src="picture/info-img-4.png" alt />
            <span>未评估(个)</span>
            <p>{{wpg}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  name: 'LabelTag',
  data() {
    return {
      jgsum:0,
      ypg:0,
      pgz:0,
      wpg:0
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.analyse.getZgbmBaseInfo({
            //请求参数(this.depCode是全局变量)
            dep_code: this.depCode
        })
        //赋值给变量
        this.jgsum = res.JGSUM
        this.ypg = res.YPG
        this.pgz = res.PGZ
        this.wpg = res.WPG
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
@font-face{
  font-family:electronicFont;
  src:url(~@/assets/font/DS-DIGIT.TTF);
  font-weight: normal;
  font-style: normal;

}
.tag-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    justify-content: center;
}

.info-main li {
  float: left;
  width: 50%;
  padding-bottom: 10px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.info-main li:nth-child(1) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-main li:nth-child(2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-main li:nth-child(3) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.info-main li img {
  display: block;
  margin: 20px auto 5px auto;
}
.info-main li span {
  font-size: 16px;
  opacity: 0.8;
}
.info-main li p {
  font-size: 28px;
  font-weight: bold;
}
.info-main ul {
  overflow: hidden;
}

.con-left > .left-top > .top-bottom {
  height: calc(38% - 20px);
  width: 100%;
}
.con-left > .left-bottom {
  width: 100%;
  height: 25%;
}
</style>
